<template>
	<view>		
		<view class="bg-gradual-green">
			<!--  搜索 begin-->
			<searchInputTop bgColor="bg-gradual-green" :height="customBarHeight" @search="search" placeholder="搜索附近特产"></searchInputTop>
			<!-- 搜索 end-->
		</view>
		
		<view v-if="isInit" :style="'height:'+screenHeight+'px;'">
			<mescroll-uni ref="mescrollRef" :fixed="false" :bottom="0"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
				
				<!-- 广告条 begin -->
				<view class="padding-sm" style="background-color: #54d367;">
					<bw-swiper :swiperList="swiperList" :oriSwiperHeight="swiperHeight"></bw-swiper>
				</view>			
				<!-- 广告条 end -->
				<!-- 导航栏 begin -->
				<uniSticky>
					<view style="background-color: #54d367;">
						<navTabNoBtn :tabTitle="typeList" @changeTab="changeTab"></navTabNoBtn>
					</view>
				</uniSticky>
				<!-- 导航栏 end -->	
				
				<!-- 通告栏 begin -->
				<uni-notice-bar v-if="showNotice" showClose single text="您拒绝了位置授权,仅显示特产与避暑山庄间的距离"></uni-notice-bar>
				<!-- 通告栏 begin -->			
				
				<mescroll-empty v-if="emptyList"></mescroll-empty>
				
				<!-- 列表部分 begin -->
				<view class='grid col-2'>						
					<view v-for="(item,index) in list" v-if="list.length > 0" :key="index" class="padding-xs">
						<view class="cu-list menu-avatar bg-white" @tap="showWin(item)">								
							<bgImg :img="item.img">
								<view class="text-white text-bold text-sm text-cut" style="width:100%;position:absolute;bottom:10rpx;left:15rpx;">										
									<text>{{item.sceneryName}} (<text class="cuIcon-locationfill"></text>{{item.distance}}公里) </text>
									<text class="margin-left-xs" v-if="item.status==2">有售</text>
								</view>
							</bgImg>
							
							<view class="text-cut flex justify-between text-content padding-lr-sm text-black">
								<text class="text-bold text-cut" style="width: 65%;">{{item.name}} </text>
								<text class="text-red" style="display: inline-block;">
									<text class="text-xs">售价￥</text>{{item.sellPrice}}元/{{item.unit}}</text>
								</text>
							</view>
							
							<view class="text-cut flex justify-between padding-sm" style="padding-top:0;">
								<text class="text-gray text-sm">评分:<text :class="'text-'+item.scoreColor">{{roundFun(item.score)}}</text></text>
								<view class="text-gray margin-right-xs text-sm">想买:<text class="text-olive">{{item.fav}}</text></view>
								<view class="text-gray text-sm">浏览:<text>{{item.clickStr}}</text></view>								
							</view>
							
						</view>
					</view>						
				</view>
				<!-- 列表部分 end -->				
			</mescroll-uni>
		</view>
		
		<view class="cu-load load-modal" v-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本	
	import * as confirm from '@/common/confirm.js'
	import * as auth from '@/common/authorize.js'
	import * as util from '@/common/util.js'
	
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	import bgImg from '@/components/img-list/bg-img.vue';
	import navTabNoBtn from "@/components/tab/navTabNoBtn.vue"
	import uniSticky from "@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue"
	import searchInputTop from "@/components/search/search-input-top.vue"
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBody,uniSticky,bgImg,navTabNoBtn,searchInputTop
		},
		data() {
			return {
				isInit:false,
				showNotice:false,
				customBarHeight:this.CustomBar,
				screenHeight:this.s_h_notb,
				list:[],
				swiperList:[],
				swiperHeight:120,
				keyword:"",
				typeList:[],
				type:0,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无此类特产',
					},
					textNoMore:'-- 暂无更多特产 --',
					toTop:{
						offset:500,
						bottom: '300rpx',
					}
				},
			}
		},
		async created() {
			let _this=this
			
			this.$api.post('/ad/list',{p:2}).then(res => {
				this.swiperList=res.data
				
				this.$api.post('/common/goods_type/list').then(res => {
					let typeList=[{id:0,name:'推荐'},...res.data]
					this.typeList=typeList
				})
				
				//取得Gps权限
				auth.checkAndGetGpsAuth({
						success:()=>_this.getLocation(),
						fail:()=>{							
							this.showNotice=true
							this.lng=117.934751
							this.lat=40.995408
							this.isInit=true
						}
				})
				
			})			
			
		},
		methods: {
			//取得位置信息并获取初始数据
			async getLocation(){
				auth.getUserLocation().then((res)=>{
					this.lng=res.lng
					this.lat=res.lat
					this.isInit=true
				}).catch((res)=>{
					confirm.error("获取地理位置出错!")
				})			
			},
			search(k){
				this.keyword=k
				this.mescroll.resetUpScroll();
			},
			showWin(item){
				uni.navigateTo({
					url:"/pages/goods/detail?id="+item.id
				})
			},
			roundFun(value) {
				let res=util.roundFun(value,1)
				return res==0?'暂无':res+'分';
			},
			changeTab(index){
				let type=this.typeList[index]
				this.type=type.id
				this.list=[]
				this.$nextTick(()=>{
					this.mescroll.resetUpScroll();
				})				
			},
			//页面数据请求事件
			upCallback(page) {
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
					
				let params={
					"type":this.type,
					"p":pageNum,
					"k":this.keyword,
					"type":this.type,
					"lat":this.lat,
					"lng":this.lng
				}
				
				_this.$api.post('/goods/page',params).then(res => {
					let data=res.data.data;
					
					let curPageData = data.list;
					let curPageLen=curPageData.length
					let totalSize=data.count;
					
					curPageData.forEach((item)=>{
						item.disColor=util.calColor(item.distance)
					})
					
					if(page.num == 1) _this.list = []; //如果是第一页需手动置空列表
					_this.list = _this.list.concat(curPageData); //追加新数据
											
					_this.mescroll.endBySize(curPageLen, totalSize);
					
					if(_this.isInit){
						_this.isInit=true;
					}
					
				}).catch(error=>{
					uni.showToast({
						icon: 'none',
						title: '网络异常'
					})
				})
			},			
		}
	}
</script>

<style scoped>
	
</style>